import React, { Children } from 'react'
import { Layout, theme } from 'antd'
import CommonAside from '../components/CommonAside/index.js'
import CommonHeader from '../components/CommonHeader/index.js'
import CommonTag from '../components/CommonTag/index.js'
import { useSelector } from 'react-redux'
import { Outlet } from 'react-router-dom'
import RouterAuth from '../router/routerAuth.js'
const { Header, Sider, Content } = Layout
const Main = () => {
  const {
    token: { colorBgContainer, borderRadiusLG }
  } = theme.useToken()
  // 获取展开收取的状态
  const collapsed = useSelector((state) => state.tab.isCollapse) 
  return (
    <RouterAuth>
      <Layout className="main-container">
        <CommonAside collapsed={collapsed}></CommonAside>
        <Layout>
          <CommonHeader collapsed={collapsed}></CommonHeader>
          <CommonTag></CommonTag>
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG
            }}
          >
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Layout>
    </RouterAuth>
  )
}
export default Main
